<template>

  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="initDictConfig">
        <a-row :gutter="24">
          <a-col  :md="12" :sm="50">
            <a-form-item label="问题分类">
              <j-tree-select
                v-model="queryParam.questionTypeId"
                placeholder="请选择问题分类"
                dict="question_type,name,id"
                pidField="parent_id">
              </j-tree-select>
              {{ id }}
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="问题标题/标签">
              <a-input placeholder="请输入问题标题/标签" v-model="queryParam.query"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="initDictConfig" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->


    <!-- table区域-begin -->
    <div style="height: 900px;">
      <a-row>
        <a-col :span="12">
          <div style="height:450px;" class="item-border">
            <a-table
              ref="table"
              size="small"
              bordered
              rowKey="id"
              class="j-table-force-nowrap"
              :scroll="{x:true, y:300}"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :height="380"
              :loading="loading"
              @change="loadTa">
              <template slot="imgSlot" slot-scope="text">
                <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                <img v-else :src="getImgView(text)" height="25px" alt="" style="font-size: 12px;font-style: italic;"/>
              </template>
            </a-table>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="height:450px;" class="item-border">
            <pie title="学员性别分布" :dataSource="sexBingData" :height="380"/>
          </div>
        </a-col>
      </a-row>
      <a-row style="margin-top: 6px;">
        <a-col :span="12">
          <div style="height:450px;" class="item-border">
            <bar title="学员年龄分布" :dataSource="ageZhuData" :height="380"/>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="height:450px;" class="item-border">
            <bar title="学员差点分布" :dataSource="chadianZhuData" :height="380"/>
          </div>
        </a-col>
      </a-row>
    </div>

  </a-card>
</template>

<script>
  import Vue from 'vue'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import Bar from '@/components/chart/Bar'
  import Pie from '@/components/chart/Pie'
  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
  import { getAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'

  export default {
    name: "QuestionList",
    mixins:[JeecgListMixin],
    components: {
      JTreeSelect,
      JMultiSelectTag,
      LineChartMultid,
      Pie,
      Bar,
    },
    data () {
      return {
        description: '方案分析管理页面',
        resultData: [],
        sexBingData: [],
        ageZhuData: [],
        chadianZhuData: [],
        dataSource: [],
        columns: [
          {
            title:'头像',
            align:"center",
            dataIndex: 'avatar',
            scopedSlots: {customRender: 'imgSlot'}

          },{
            title:'姓名',
            align:"center",
            dataIndex: 'realName'
          }
        ],
        url: {
          list: "/user/trainee/analysis",
          delete: "/question/delete",
          deleteBatch: "/question/deleteBatch",
          exportXlsUrl: "/question/exportXls",
          importExcelUrl: "/question/importExcel",
        },
      }
    },
    created() {
      this.initDictConfig()
    },

    computed: {
      importExcelUrl: function(){
      }
    },
    methods: {
      loadTa(pagination, filters, sorter){
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.getList()
      },
      initDictConfig(){
        var self = this
        var rqUlr = `${window._CONFIG['domianURL']}/${this.url.list}`
        var params = this.getQueryParams();
        console.log(params)
        Vue.set(params, 'current', params.pageNo)
        this.loading = true;
        getAction(rqUlr, params).then(res=>{
          self.loading = false
          if(res.distName != null) {
            this.dataSource =  res.distName.records
            this.ipagination.total = res.distName.total
          }
          //将性别转换 成饼图
          self.sexBingData = []
          if(res.distSex != null) {
            let sexItem = {}
            Vue.set(sexItem, 'item', '男('+res.distSex.maleCount+')')
            Vue.set(sexItem, 'count', res.distSex.maleCount)
            let sexItem1 = {}
            Vue.set(sexItem1, 'item', '女('+res.distSex.femaleCount+')')
            Vue.set(sexItem1, 'count', res.distSex.femaleCount)
            self.sexBingData.push(sexItem)
            self.sexBingData.push(sexItem1)
          }else {
            let sexItem = {}
            Vue.set(sexItem, 'item', '无数据')
            Vue.set(sexItem, 'count', 0)
            self.sexBingData.push(sexItem)
          }

          // 年龄分布
          self.ageZhuData = []
          if(res.distAge != null) {
            res.distAge.forEach(function(v) {
              self.ageZhuData.push({
                ['x']: v.bracketStart+'~'+v.bracketEnd,
                ['y']: v.persons
              })
            })
          }
          // 差点分布
          self.chadianZhuData = []
          if(res.distChadian!=null) {
            res.distChadian.forEach(function(v) {
              self.chadianZhuData.push({
                ['x']: v.bracketStart+'~'+v.bracketEnd,
                ['y']: v.persons
              })
            })
          }
        })
      },
      getList(){
        var self = this
        var rqUlr = `${window._CONFIG['domianURL']}/${this.url.list}`
        var params = this.getQueryParams();
        console.log(params)
        Vue.set(params, 'current', params.pageNo)
        this.loading = true;
        getAction(rqUlr, params).then(res=>{
          self.loading = false
          if(res.distName != null) {
            this.dataSource =  res.distName.records
            this.ipagination.total = res.distName.total
          }
        })
      }
    }
  }
</script>
<style scoped>
  .item-border{
    border: 1px solid #f5f7fa;
    box-shadow: 10px 10px 5px #f5f7fa;
    width: 99%;
    border-radius: 0px 0px 14px 14px;
    padding: 8px;
  }
  .tag{
    border: 1px solid #00ff00;
    border-radius: 15px;
    margin-right: 10px;
    float: left;
    padding: 0 8px;
    margin-top: 12px;
  }
</style>